<template>
  <div style="height: 100%" ref="echart"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    // 父组件传的值
    chartData: {
      type: Object, // 包含x轴与y轴的值
      default() {
        // 默认值
        return {
          seriesdata: []
        }
      }
    },
    isAxisChart: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    chartData: {
      handler: function() {
        this.initChart()
      },
      deep: true
    },
    isCollapse() {
      setTimeout(() => {
        this.resizeChart()
      }, 300)
    }
  },
  data() {
    return {
      echart: null,
      // 有坐标轴的配置
      axisOption: {
        legend: {
          textStyle: {
            // 图例文字
            color: '#4fcdff'
          }
        },
        tooltip: {
          formatter: '{a} <br/>{c} {b}'
        },
        grid: {
          left: '10',
          right: '20',
          bottom: '10',
          containLabel: true
        },
        series: [
          {
            name: '',
            type: 'gauge',
            min: 0,
            max: 100,
            splitNumber: 10,
            center: ['50%', '70%'],
            radius: '100%',
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  [0.6, 'red'],
                  [0.75, '#ffb203'],
                  [0.9, 'yellow'],
                  [1, 'blue']
                ],
                width: 3,
                shadowColor: '#fff', // 默认透明
                shadowBlur: 5
              }
            },
            axisLabel: {
              // 坐标轴小标记
              fontWeight: 'bolder',
              color: '#fff',
              shadowColor: '#fff', // 默认透明
              shadowBlur: 10
            },
            axisTick: {
              // 坐标轴小标记
              length: 5, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: 'auto',
                shadowColor: '#fff', // 默认透明
                shadowBlur: 10
              }
            },
            splitLine: {
              // 分隔线
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 3,
                color: '#fff',
                shadowColor: '#fff', // 默认透明
                shadowBlur: 10
              }
            },
            pointer: {
              length: 30, // 分隔线
              shadowColor: '#fff', // 默认透明
              shadowBlur: 2
            },
            title: {
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 15,
                color: '#fff',
                shadowColor: '#fff', // 默认透明
                shadowBlur: 10
              }
            },
            detail: {
              borderColor: '#fff',
              shadowColor: '#fff', // 默认透明
              shadowBlur: 5,
              offsetCenter: [0, '20%'], // x, y，单位px
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontSize: 20,
                color: '#fff'
              }
            },
            data: []
          }
        ],
        color: [
          '#409eff',
          '#ff6600',
          '#f5994e',
          '#c05050',
          '#59678c',
          '#c9ab00',
          '#7eb00a',
          '#6f5553',
          '#c14089'
        ]
      },
      levels: null
    }
  },
  computed: {
    options() {
      return this.isAxisChart ? this.axisOption : this.normalOption
    },
    isCollapse() {
      return this.$store.state.tab.isCollapse
    }
  },
  methods: {
    initChart() {
      this.initChartData()
      if (this.echart) {
        this.echart.setOption(this.options)
      } else {
        this.echart = echarts.init(this.$refs.echart)
        this.echart.setOption(this.options)
        this.getecharts()
      }
    },
    initChartData() {
      if (this.isAxisChart) {
        this.axisOption.series[0].data = this.chartData.seriesdata
      } else {
        this.normalOption.series = this.chartData.series
      }
    },
    resizeChart() {
      // 浏览器界面改变大小echart自适应
      this.echart ? this.echart.resize() : ''
    },
    getecharts: function() {
      const that = this
      this.echart.on('click', function(params) {
        this.levels = params.name
        that.$emit('echartDetail', this.levels)
      })
    }
  },
  mounted() {
    window.addEventListener('resize', this.resizeChart)
  },
  destroyed() {
    // 销毁
    window.removeEventListener('resize', this.resizeChart)
  }
}
</script>

<style lang="scss" scoped></style>
